/* banner 图 */
.banner{
    margin-bottom:15px;

    img{
        width:100%;
        height:100%;
    }
}

/* 风险评估 */
.risk{
    width:100%;
    border-top:1px solid #6c6c66;
    padding-bottom:30px;

    .title{
        width:30%;
        text-align: center;
        font-size:1.4em;
        color:#1c91dd;
        background:#fff;
        margin:0 auto;
        margin-top:-15px;
        margin-bottom:30px;
    }

    .iconlist{
        display: flex;
        justify-content: space-around;
        margin-bottom:15px;

        .item{
            width:20%;

            .icon{
                margin-bottom:10px;
            }

            .name{
                text-align: center;
            }
        }
    }

    .box{
        display: flex;
        flex-wrap: wrap;

        &>div{
            width:33.3%;
        }

        .info{
            padding-left:10px;
            padding-top:10px;
            background:#f5f5f5;

            .subject{
                font-size:1.2em;
            }

            ul{
                li{
                    a{
                        color:#8c8c8c;
                        font-size:1em;
                    }
                }
            }
        }
    }
}

/* 应用 */
.app{
    width:100%;
    border-top:1px solid #6c6c66;
    padding-bottom: 10px;

    .title{
        width:50%;
        text-align: center;
        font-size:1.4em;
        color:#1c91dd;
        background:#fff;
        margin:0 auto;
        margin-top:-15px;
        margin-bottom:10px;
    }

    .info{
        position: relative;
        margin-bottom:10px;

        &:hover .back{
            left:0%;
        }

        .back{
            position: absolute;
            left:-50%;
            top:0;
            width:50%;
            height:100%;
            background:rgba(0,0,0,.6);
            padding:2% 2% 0%;
            color:#fff;

            transition: all ease-in-out .3s;

            .subject{
                width:100%;
                font-size:1.5em;
                font-weight:bold;
                text-align: center;
            }

            .taglist{
                width:65%;
                margin:0 auto;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                .tag{
                    width:48%;
                    height:2em;
                    line-height:2em;
                    text-align: center;
                    font-size:1.1em;
                    border:1px solid #fff;
                    margin-bottom:5%;
                }
            }
        }
    }

    .box{
        width:100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .item{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom:5px;
            padding:3% 0%;

            &:nth-child(1),&:nth-child(2){
                width:49%;
            }

            &:nth-child(1){
                background:#55acee;
            }

            &:nth-child(2){
                background:#3b5998;
            }

            &:nth-child(3){
                width:100%;
                background:#363a42;
            }

            .name{
                color:#fff;
                font-size:1.2em;
                font-weight: bold;
            }

            img{
                flex-shrink: 0;
                width:16%;
                margin-right:10px;
            }

        }
    }
}

/* 联系我们 */
.about{
    width:100%;
    border-top:1px solid #6c6c66;
    padding-bottom:6em;

    .title{
        width:30%;
        text-align: center;
        font-size:1.4em;
        color:#1c91dd;
        background:#fff;
        margin:0 auto;
        margin-top:-15px;
        margin-bottom:10px;
    }

    .info{
        padding-left:15px;

        .line{
            display: flex;
            justify-content: flex-start;
            margin-bottom:10px;

            .item{
                width:50%;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                img{
                    margin-right:6px;
                }
            }

            &:last-child{
                .item{
                    width:100%;
                }
            }
        }

        
    }

    .map{
        width:100%;
        height:20em;
    }
}